@import '../../assets/scss/support';

page{
  background-color: #ffffff;
}

.container{
  display: flex;
  flex-direction: column;
  min-height: 100%;
  //顶部搜索
  .search{
    width:702rpx;
    margin:15px 12px;
    height:35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .search-left{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width:305px;
      height:35px;
      border-radius: 18px;
      background-color: #efefef;
      .search-logo{
        width:15px;
        height:15px;
        margin:0 5px 0 10px;
      }
      .search-input{
        width:233px;
        height:19px;
        border:none;
        // min-height: 19px;
        font-size: 13px;
        color:#333333;
      }
      .deleteInput{
        width:22px;
        height:22px;
        margin:0 15px 0 5px;
      }
      .search-input-place{
        font-size: 13px;
        color:#9a9a9a;
      }
    }
    .search-right{
      font-size: 14px;
      color:#7e7e7e;
    }
  }
  //历史记录和热搜
  .record{
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    //历史记录
    .history{
      width:702rpx;
      margin:0 12px;
      display: flex;
      flex-direction: column;
      .history-top{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .history-top-left{
          font-size: 13px;
          color:#000000;
          font-weight: 500;
        }
        .history-top-right{
          width:22px;
          height:22px;
          background: url('%ASSETS_IMG%/l-search-delete@2x.png') no-repeat;
          background-size: contain;
        }
      }
      .history-bottom{
        width:100%;
        padding-top:6px;
        
        .overList{
          display: flex;
        flex-direction: row;
        justify-content:flex-start;
        align-items: center;
        flex-wrap: wrap;
          .historyList-item{
            margin-bottom:10px;
            margin-right:10px;
            padding:6px 10px;
            border:1px solid #f3f3f3;
            font-size: 13px;
            color:#000000;
            border-radius: 15px;
          }
        }
        
      }
      .history-next{
        margin-top:15px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .history-next-text{
          font-size: 13px;
          color:#333333;
          font-weight: 500;
          line-height: 19px;
        }
        .history-dropDown{
          width:22px;
          height:22px;
        }
      }
      .history-last{
        margin-top:15px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .history-last-text{
          font-size: 13px;
          color:#333333;
          font-weight: 500;
          line-height: 19px;
        }
        .history-packUp{
          width:22px;
          height:22px;
        }
      }
      .HistoryThree{
        // max-height:125px;
        overflow: hidden;
      }
      .HistorySix{
        // max-height:246px;
        overflow: hidden;
      }
    }
    .list-line{
      width:100%;
      height:5px;
      background-color: #f4f5f7;
      margin:15px 0;
    }
    .topSearch{
      width:702rpx;
      margin:0 12px;
      display: flex;
      flex-direction: column;
      .topSearch-top{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 13px;
        font-weight: 500;
      }
      .topSearch-List{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content:flex-start;
        align-items: center;
        flex-wrap: wrap;
        .hotList-item{
          margin-top:10px;
          margin-right:10px;
          padding:6px 10px;
          border:1px solid #f3f3f3;
          border-radius: 15px;
          display: flex;
          flex-direction: row;
          align-items: center;
          .hot{
            width:11px;
            height:13px;
            background: url('%ASSETS_IMG%/l-hotList-hot@2x.png') no-repeat;
            background-size: contain;
            margin-right:5px;
          }
          .hotList-name{
            font-size: 13px;
            color:#000000;
          }
        }
      }
    }
  }
  //搜索结果
  .searchInfo{
    width:100%;
    // margin:0 12px;
    display: flex;
    flex-direction: column;
    .activity{
      width:702rpx;
      margin:0 12px;
      border-top:1px solid #e9e9e9;
      display: flex;
      flex-direction: column;
      align-items: center;
      .activityItem{
        width:100%;
        height:55px;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom:1rpx solid #e9e9e9;
        .activity-logo{
          width:35px;
          height:32px;
          background-color: #d8d8d8;
          margin-right:10px;
        }
        .activityItem-info{
          display: flex;
          flex-direction: column;
          width:312px;
          height:32px;
          justify-content: space-between;
          .activityItem-info-name{
            @include textoverflow(1);
            font-size: 14px;
            color:#333333;
            max-width: 312px;
          }
          .activityItem-info-desc{
            @include textoverflow(1);
            font-size: 10px;
            color:#999999;
            max-width: 312px;
          }
        }
        .activity-tap{
          width:22px;
          height:22px;
          margin-left:10px;
        }
      }
      .more{
        width:100%;
        height:55px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .more-top{
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .more-search{
            width:15px;
            height:15px;
            margin-left:4px;
            margin-right:2px;
            background: url('%ASSETS_IMG%/l-search-logo1@2x.png') no-repeat;
            background-size: contain;
          }
          .more-text{
            // width:329px;
            font-size: 14px;
            color:#333333;
          }
        }
        .more-tap{
          width:22px;
          height:22px;
        }
      }
      .closeMore{
        width:100%;
        height:55px;
        font-size: 14px;
        color:#333333;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        image{
          width:22px;
          height:22px;
          margin-left:5px;
        }
      }
    }
    .activity-line{
      width:100%;
      height:10px;
      background-color: #f4f5f7;
    }
    .goods{
      width:100%;
      display: flex;
      flex-direction: column;
      .screenFix{
        position: fixed;
        left:0;
        z-index: 999;
        box-shadow: 0px 1px 2px rgba(202, 202, 202, 0.5);
      }
      .goods-top{
        width:100%;
        height:44px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        background-color: #f9f9f9;
    
        .price{
          display: flex;
          flex-direction: row;
          align-items: center;
          .price-text{
            font-size: 14px;
            color:#333333;
            font-weight: 500;
            line-height: 20px;
          }
          .price-select{
            color:#ea1213;
          }
          .price-state0{
            width:22px;
            height:22px;
            background: url('%ASSETS_IMG%/l-goods-price0@2x.png') no-repeat;
            background-size: contain;
          }
          .price-state1{
            width:22px;
            height:22px;
            background: url('%ASSETS_IMG%/l-goods-price1@2x.png') no-repeat;
            background-size: contain;
          }
          .price-state2{
            width:22px;
            height:22px;
            background: url('%ASSETS_IMG%/l-goods-price2@2x.png') no-repeat;
            background-size: contain;
          }
        }
        .discount{
          display: flex;
          flex-direction: row;
          align-items: center;
          .discount-text{
            font-size: 14px;
            color:#333333;
            font-weight: 500;
            line-height: 20px;
          }
          .discount-select{
            color:#ea1213;
          }
          .discount-state0{
            width:22px;
            height:22px;
            background: url('%ASSETS_IMG%/l-goods-discount0@2x.png') no-repeat;
            background-size: contain;
          }
          .discount-state1{
            width:22px;
            height:22px;
            background: url('%ASSETS_IMG%/l-goods-discount1@2x.png') no-repeat;
            background-size: contain;
          }
          .discount-state2{
            width:22px;
            height:22px;
            background: url('%ASSETS_IMG%/l-goods-discount2@2x.png') no-repeat;
            background-size: contain;
          }
        }
        .screening{
          display: flex;
          flex-direction: row;
          align-items: center;
          .screening-text{
            font-size: 14px;
            color:#333333;
            font-weight: 500;
            line-height: 20px;
          }
          .screening-select{
            color:#ea1213;
          }
          .screening-state0{
            width:22px;
            height:22px;
            background: url('%ASSETS_IMG%/l-goods-screening0@2x.png') no-repeat;
            background-size: contain;
          }
          .screening-state1{
            width:22px;
            height:22px;
            background: url('%ASSETS_IMG%/l-goods-screening1@2x.png') no-repeat;
            background-size: contain;
          }
        }
      }
      .screenList{
        width:361px;
        padding:0 7px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        background-color: #f9f9f9;
        .screenList-item{
          padding:5px 12px;
          border:1px solid #ea1213;
          margin:10px 5px; 
          color:#ea1213;
          border-radius: 13px;
          display: flex;
          flex-direction: row;
          align-items: center;
          .screenItem-name{
            font-size: 12px;
            line-height: 17px;
          }
          .delete{
            font-size: 12px;
            line-height: 17px;
            margin-left:5px;
          }
        }
      }
      .goodsList{
        width:716rpx;
        margin-left:6px;
        padding:0 11px 0 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .goodsItem{
          width:173px;
          margin-bottom: 20rpx;
          margin-left:12rpx;
        }
      }
    }
  }
}

.onreachBottom {
  font-size: 32rpx;
  color: #999;
  display: inline-block;
  width: 100%;
  text-align: center;
  line-height: 32rpx;
  padding-bottom: 30rpx;
}

.goodsList-empty{
  margin: 50px auto;
  height:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .empty-img{
    width:144px;
    height:126px;
    background: url('%ASSETS_IMG%/l-search-empty1@2x.png') no-repeat;
    background-size: contain;
  }
  .empty-text{
    font-size: 16px;
    color:#666666;
    font-weight: 300;
  }
}

.empty{
  // position: fixed;
  // left:0;
  // right:0;
  // bottom:0;
  margin: 121px auto;
  height:100%;
  // padding:185px auto;
  // background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .empty-img{
    width:144px;
    height:126px;
    background: url('%ASSETS_IMG%/l-search-empty1@2x.png') no-repeat;
    background-size: contain;
  }
  .empty-text{
    font-size: 16px;
    color:#666666;
    font-weight: 300;
  }
}